
<template>
  <view class="product-page">
    <image class="product-image" src="/static/logo.png" mode="aspectFill"></image>
    <view class="product-info">
      <text class="name">【睡个好觉】左慈太和枕</text>
      <view class="price-section">
        <text class="price">¥258</text>
        <text class="original-price">¥298</text>
      </view>
    </view>
    <view class="footer">
      <button class="buy-button" @click="buyNow">立即购买</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    async buyNow() {
      // 假设您在视频号小店助手的“带货”菜单中获取了商品ID
      const productId = '10000212924865'; // 请替换为真实商品ID

      if (!productId) {
          uni.showToast({ title: '请在代码中替换为真实的商品ID', icon: 'none' });
          return;
      }

      try {
        console.log(`准备跳转到视频号小店，商品ID: ${productId}`);
        wx.openChannelsActivity({
          finderUserName: 'gh_cf7855d879bd', // 请替换为您的视频号ID, e.g., sphxxxxxxxx
          feedId: productId, // 此处填写商品ID
          success: () => {
            console.log('成功跳转到视频号小店');
          },
          fail: (err) => {
            console.error('跳转视频号小店失败', err);
            uni.showToast({ title: `跳转失败: ${err.errMsg}`, icon: 'none' });
          }
        });
      } catch (e) {
        console.error('调用 openChannelsActivity 失败', e);
        uni.showToast({ title: '无法调用视频号功能', icon: 'none' });
      }
    },
  },
};
</script>

<style>
.product-page {
  display: flex;
  flex-direction: column;
}

.product-image {
  width: 100%;
  height: 750rpx;
}

.product-info {
  padding: 30rpx;
  background-color: white;
}

.name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.price-section {
  margin-top: 20rpx;
  display: flex;
  align-items: baseline;
}

.price {
  font-size: 48rpx;
  font-weight: bold;
  color: #ef4444;
}

.original-price {
  font-size: 28rpx;
  color: #999;
  text-decoration: line-through;
  margin-left: 20rpx;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background-color: white;
  border-top: 1rpx solid #eee;
}

.buy-button {
  background-color: #ef4444;
  color: white;
  font-size: 32rpx;
  border-radius: 50rpx;
}
</style>
